<template>
  <div class="app-container">
    <!--操作-->
    <div class="filter-container">
      <el-upload
        ref="my-upload"
        class="modal-upload"
        action="server/rest/model/import-process-model"
        name="file"
        accept=".xml"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :limit="1"
      >
        <el-button type="primary" size="small" icon="el-icon-upload">导入模板</el-button>
      </el-upload>
      <router-link :to="{path: '/bpmn',query:{modelId: '',processId: '', isModify: false}}">
        <el-button type="primary" size="small" icon="el-icon-plus">新建模板</el-button>
      </router-link>
    </div>
    <!--表格-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="left" label="Key">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.modelType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="系统" align="center">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createdBy }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ parseTime(scope.row.created) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="deploy(scope.row)">部署</el-button>
          <el-divider direction="vertical" />
          <router-link :to="{path: '/bpmn',query:{modelId: scope.row.id,processId: scope.row.processId, isModify: true}}">
            <el-button size="mini" type="text">编辑</el-button>
          </router-link>
          <el-divider direction="vertical" />
          <el-link type="primary" target="_blank" :underline="false" :href="`/server/rest/model/loadXmlByModelId/${scope.row.id}`">查看XML</el-link>
          <el-divider direction="vertical" />
          <el-button size="mini" type="text" @click="imgPreview(scope.row)">查看图片</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--图片预览-->
    <el-dialog title="图片预览" :visible.sync="dialogVisible" width="50%">
      <el-image :src="processImg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deploy, getModuleList } from '../../api/engine'
import { parseTime } from '@/utils'

export default {
  name: 'Template',
  data() {
    return {
      dialogVisible: false,
      processImg: '',
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    parseTime,
    fetchData() {
      this.listLoading = true
      getModuleList(this.listQuery).then(response => {
        this.total = response.data.data.total
        this.list = response.data.data.rows
        this.listLoading = false
      })
    },
    deploy(record) {
      deploy(record.id).then(response => {
        const result = response.data
        if (result.code === '100') {
          this.fetchData()
          this.$message.success(result.msg)
        }
      })
    },
    imgPreview(record) {
      this.dialogVisible = true
      this.processImg = `/server/rest/model/loadPngByModelId/${record.id}`
    },
    uploadSuccess(response, file, fileList) {
      if (response.code === '100') {
        this.$message.success(`${file.name} 导入成功`)
      } else {
        this.$message.error(`${file.name} 导入失败`)
      }
      this.$refs['my-upload'].clearFiles()
    },
    // eslint-disable-next-line handle-callback-err
    uploadError(error, file) {
      this.$message.error(`${file.name} 导入失败`)
      this.$refs['my-upload'].clearFiles()
    }
  }
}
</script>
<style scoped lang="scss">
  .filter-container {
    padding-bottom: 15px;

    .modal-upload {
      display: inline-block;
    }
  }
</style>
